<template>
  <div>
    <el-dialog
        title="修改角色信息"
        :visible.sync="showRoleUpdate"
        width="40%" @close="setShowRoleUpdate(false)">
        <el-form label-width="80px">
            <el-form-item label="角色名称">
                {{roleObj.name}}
            </el-form-item>

            <el-form-item label="拥有权限">
              <el-checkbox-group v-model="updateGradeList">
                    <el-checkbox v-for="grade in gradeList" :label="grade.id"
                     :value="grade.id" :key="grade.id" >{{grade.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="setShowRoleUpdate(false)" type="info">取消</el-button>
            <el-button @click="updateRole" type="info">修改</el-button>
        </span>
        </el-dialog>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from "vuex"
export default {
    data(){
      return {
        gradeList:[] //所有权限集合
      }
    },
    computed:{
        ...mapState('role',['showRoleUpdate','roleObj','updateGradeList']),
        updateGradeList:{ //在计算属性中设置和得到vuex的updateGradeList，绑定权限id数组
          set(list){
            this.setUpdateGradeList(list);
          },
          get(){
            return  this.$store.state.role.updateGradeList
          }
        },
        showRoleUpdate:{
          set(isSow){
            this.setShowRoleUpdate(isSow);
          },
          get(){
            return  this.$store.state.role.showRoleUpdate
          }
        }
    },
    methods:{
        ...mapMutations('role',['setShowRoleUpdate','setUpdateGradeList']),
        async updateRole(){//修改角色权限
            var info = await this.ajax.getSubmit("/project/role/update",{id:this.roleObj.id,
              gradeArray:this.updateGradeList});

            if(info == "ok"){//返回值为ok,关闭弹出层
                this.setShowRoleUpdate(false);
            }
        },
        async findAllGrade(){//查询所有权限
          this.gradeList = await this.ajax.getSubmit("/project/grade/findAll");
        }
    },
    created(){
        this.findAllGrade();
    }
}
</script>

<style>

</style>